<template>
    <div class="dash-box">
        <label class="car_title">{{label}}</label>
        <div class="dash-draw" :id="id"></div>
    </div>
</template>
<script>
export default {
    name: 'dashboard',
    props: {
        label: {
            type: String,
            default: () => {
                return ""
            }
        },
        id: {
            type: String,
            default: () => {
                return ""
            }
        },
        number: {
            type: Number,
            default: () => {
                return 0
            }
        }
    },
    watch: {
        number(newdata) {
            this.drawDashboardEchart()
        }
    },
    mounted() {
        this.drawDashboardEchart()
    },
    methods: {
        drawDashboardEchart() {
            let chartDom = this.$echarts.init(document.getElementById(this.id))
            let thickness = 16
            let option = {

                series: [
                    {
                        type: 'gauge',//类型是仪表盘
                        radius: 60,
                        //        data:[{value:85, name: '得分'}],//仪表盘的值为85，鼠标经过时显示的框名字为“得分”
                        //        center : ['50%', '78'],//仪表盘的位置 第一个值为x轴，第二个值为y轴
                        //        startAngle:180,//开始角度
                        //        endAngle:0,//结束角度
                        //        splitNumber: "none",
                        axisLine: {
                            lineStyle: {
                                width: thickness,
                                color: [
                                    [0.3, '#67e0e3'],
                                    [0.7, '#37a2da'],
                                    [1, '#fd666d']
                                ]
                            }
                        },
                        splitLine: {
                            distance: - thickness,
                            length: thickness,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        },
                        data: [
                            {
                                value: this.number
                            }
                        ]
                    }
                ]
            };
            chartDom.setOption(option)
            window.addEventListener("resize", () => {
                chartDom.resize();
            });
        }
    },

}
</script>
  
<style scoped lang='less'>
.dash-box {
    height: 25%;
    width: 100%;
    padding: 12px;

    label {
        font-size: 14px;
        font-weight: 600;

    }

    .dash-draw {
        height: calc(100% - 20px);
    }
}
</style>